<template>
  <view style="padding: 32rpx 24rpx 31rpx 25rpx;">
    <view class="mainColor colorB" style="border-radius: 28rpx;text-align: center;padding: 142rpx 0 82rpx 0;">
      <p style="font-size: 39rpx;margin-bottom: 42rpx;">可提现金额</p>
      <p style="font-size: 26rpx;margin-bottom: 97rpx;">￥0.00</p>
      <view class="flex justify-between align-center" style="padding: 0 130rpx;">
        <view class="colorB pay">充值</view>
        <view class="colorB pay">提现</view>
      </view>
    </view>
    <view class="flex justify-between" style="margin-top: 31rpx;">
      <view class=" border-28"
        style="width: 219rpx;height: 55rpx;text-align: center;line-height: 55rpx;background-color: #363f51;"
        v-for="(item,index) in depositList" :key="index" :class="{'active':current === index}" @click="checked(index)">
        <view>
          {{item.title}}
        </view>
      </view>
    </view>
    <view class="colorB">
      <view class="" v-if="current=== 0">
        你好
      </view>
      <view class="" v-if="current=== 1">
        你好
      </view>
      <view class="" v-if="current=== 2">
        年后
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        depositList: [{
            index: '1',
            title: '提现记录'
          },
          {
            index: '2',
            title: '站点明细'
          },
          {
            index: '3',
            title: '分账明细'
          }
        ],
        current: 0,
      };
    },
    methods: {
      checked(index) {
        // console.log(index);
        this.current = index
        // this.text = this.depositList[index].title
        console.log('营收页面', this.current);
      },
    }
  }
</script>

<style lang="scss" scoped>
  .pay {
    width: 95rpx;
    height: 95rpx;
    background-color: #fff;
    font-size: 39rpx;
    border-radius: 50%;
    // margin: 0 303rpx 0 303rpx;
    text-align: center;
    line-height: 95rpx;
  }



  .active {
    position: relative;
    // color: #fff;
    // border-radius: 10rpx;
    background-color: #040f26 !important;
    // background-color: red !important;
  }
</style>